window.onload = function () {
    let homeHero = document.querySelector(".home-hero");
    let cartMini = document.querySelector(".cart-mini");
    let cartMenu = document.querySelector(".cart-menu");
    let navItems = document.querySelectorAll(".nav-item");
    let headerNavMenus = document.querySelectorAll(".header-nav-menu");
    let preMenu = headerNavMenus[0];
    // let categoryList = document.querySelector(".site-category-list");
    let categoryItems = document.querySelectorAll(".category-item");
    let categoryChildren = document.querySelectorAll(".children");
    let preChild = categoryChildren[0];
    let timer = null;
    let carMenuTimer = null;
    let categoryTimer = null;
    //购物车
    cartMini.onmouseenter =()=>{
        clearTimeout(carMenuTimer);
        cartMenu.style.display = "block";
    };
    cartMini.onmouseleave = ()=>{
        carMenuTimer = setTimeout(()=>{
            cartMenu.style.display = "none";
        },400);
    };
    cartMenu.onmouseenter = function(){
        clearTimeout(carMenuTimer);
        this.style.display = "block";
    };
    cartMenu.onmouseleave = function () {
        this.style.display = "none";
    };
    //头部导航hover菜单
    for(var i=0;i<8;i++){
        navItems[i].index = i;
        headerNavMenus[i].index = i;
        navItems[i].onmouseenter = function () {
            preMenu.style.display = "none";
            clearTimeout(timer);
            headerNavMenus[this.index].style.display = "block";
            preMenu = headerNavMenus[this.index];
        };
        navItems[i].onmouseleave = function () {
            index1 = this.index;
            timer = setTimeout(function () {
                headerNavMenus[index1].style.display = 'none';
            },400);
        };
        headerNavMenus[i].onmouseenter = function () {
            clearTimeout(timer);
            this.style.display = 'block';
        };
        headerNavMenus[i].onmouseleave = function () {
            index2 = this.index;
            timer = setTimeout(function () {
                headerNavMenus[index2].style.display = 'none';
            },400);
        }
    }
    //竖导航栏右侧hover商品栏
    for(var i=0;i<categoryItems.length;i++){
        categoryItems[i].index = i;
        categoryChildren[i].index = i;
        categoryItems[i].onmouseenter = function () {
            preChild.style.display = "none";
            clearTimeout(categoryTimer);
            categoryChildren[this.index].style.display = "block";
            preMenu = headerNavMenus[this.index];
        };
        categoryItems[i].onmouseleave = function () {
            index1 = this.index;
            categoryChildren[index1].style.display = 'none';
        };
    }
    /*----------------------------------------------轮播图----------------------------------------------------------*/
    let swiperWrapper = document.querySelectorAll(".swiper-wrapper");
    let swiperBullet = document.querySelectorAll(".swiper-pagination-bullet");
    let index = 0;
    let swiperTimer = null;
    //左箭头点击事件
    var swiperPrev = document.querySelector(".swiper-button-prev");
    swiperPrev.addEventListener("click", function (event) {
        //点击左箭头时，index--
        index--;
        //若index < 0 则赋值为3，达到循环的效果
        if (index < 0) {
            index = 3;
        }
        console.log(index);
        //设置小圆点
        setZero();
        //设置图片
        setPicture();
    });
    //右箭头点击事件
    var swiperNext = document.querySelector(".swiper-button-next");
    swiperNext.addEventListener("click", function (event) {
        index++;
        if (index > 3) {
            index = 0;
        }
        console.log(index);
        setZero();
        setPicture();
    });
    //小圆点点击事件
    for(let i=0;i<swiperBullet.length;i++){
        swiperBullet[i].addEventListener("click",function (event) {
            for(let n=0;n<swiperBullet.length;n++){
                swiperBullet[n].classList.remove("swiper-pagination-bullet-active");
            }
            this.classList.add("swiper-pagination-bullet-active");
            index = i;
            //设置图片
            setPicture();
        })
    }
    // 设置图片
    function setPicture() {
        //遍历所有图片
        for (let i = 0; i < swiperWrapper.length; i++) {
            //如果遍历到的图片是第index个，则让它显示，并设置淡入的动画效果。
            if (i === index) {
                swiperWrapper[i].style.display = "block";
                swiperWrapper[i].style.animation = "fadeIn 2s";
            } else {
                //否则，隐藏，并设置淡出动画
                swiperWrapper[i].style.animation = "fadeout 0s";
                swiperWrapper[i].style.display = "none"
            }
        }
    }
    // 设置圆点
    function setZero() {
        // entries：从数组 fruit 创建一个可迭代对象， 该对象包含了数组的键值对：
        // n:简直索引 a:元素节点
        for (let [n, a] of swiperBullet.entries()) {
            //如果是第index个小圆点，则修改这个小圆点的样式
            if (n === index) {
                a.classList.add("swiper-pagination-bullet-active");
            } else {
                //其他小圆点恢复默认样式
                a.classList.remove("swiper-pagination-bullet-active");
            }
        }
    }
    //自动轮播
    swiperTimer = setInterval(swap,3000);
    function swap(){
        index++;
        if (index > swiperBullet.length-1) {//当循环到最后一个就再从第一个开始
            index = 0;
        }
        //设置小圆点
        setZero();
        //设置图片
        setPicture();
    }
    homeHero.onmouseenter = function(){
        console.log("enter");
        clearInterval(swiperTimer);
    };
    homeHero.onmouseleave = function(){
        console.log("leave");
        swiperTimer = setInterval(swap,3000) ;
    };
    /*-------------------------------------------------右侧工具栏 回到顶部---------------------------------------------*/
    window.onscroll=function(){
        //变量t就是滚动条滚动时，到顶部的距离
        var t =document.documentElement.scrollTop||document.body.scrollTop;
        var backTop = document.querySelector(".backtop");
        //当拖动到距离顶部100px处时，左边导航固定，不随滚动条滚动
        if( t >=100) {
            backTop.style.display="block";
        }else{
            backTop.style.display="none";
        }
    }
};